<template>
  <div class="app-container">
    <el-form label-width="120px" :model="ruleForm" ref="ruleForm">
      <el-row :gutter="24">
        <el-divider content-position="left">
          <legend class="divider-line">申诉基本信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="商品名称：">
            <div class="yxkj-word-black">
              {{ sellerComplaintVO.orderProductName }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="申诉状态：">
            <div class="yxkj-word-black">
              {{ codeBox.SELLER_COMPLAINT[sellerComplaintVO.state] }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属商家：">
            <div class="yxkj-word-black">
              {{ sellerComplaintVO.sellerName }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="商品主图：">
            <div class="yxkj-word-black">
              <el-image
                style="width: 150px; height: 150px"
                :src="$imagePath + sellerComplaintVO.masterImg"
              ></el-image>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="投诉来源：">
            <div class="yxkj-word-black">{{ sellerComplaintVO.source }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="订单号：">
            <div class="yxkj-word-black">{{ sellerComplaintVO.orderSn }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="用户名：">
            <div class="yxkj-word-black">{{ sellerComplaintVO.userName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="投诉详情：">
            <div class="yxkj-word-black">{{ sellerComplaintVO.question }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="投诉时间：">
            <div class="yxkj-word-black">
              {{ sellerComplaintVO.complaintTime }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="sellerComplaintVO.image != ''" label="投诉图片：">
            <div class="yxkj-word-black">
              <el-image
                style="width: 150px; height: 150px"
                :src="$imagePath + sellerComplaintVO.image"
              ></el-image>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-divider content-position="left">
          <legend class="divider-line">商家申诉信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="申诉内容：">
            <div class="yxkj-word-black">
              {{ sellerComplaintVO.sellerCompContent }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="申诉时间：">
            <div class="yxkj-word-black">
              {{ sellerComplaintVO.sellerComplaintTime }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            v-if="sellerComplaintVO.sellerCompImage != ''"
            label="申诉图片："
          >
            <div class="yxkj-word-black">
              <el-image
                style="width: 150px; height: 150px"
                :src="$imagePath + sellerComplaintVO.sellerCompImage"
              ></el-image>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="margin-bottom: 60px;">
        <el-divider content-position="left">
          <legend class="divider-line">平台处理信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="申诉状态：">
            <div class="yxkj-word-black">
              {{ codeBox.SELLER_COMPLAINT[sellerComplaintVO.state] }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否通过：">
            <template>
              <el-radio v-model="ruleForm.stateType" label="agree"
                >通过</el-radio
              >
              <el-radio v-model="ruleForm.stateType" label="disagree"
                >不通过</el-radio
              >
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="审核意见：">
            <el-input
              type="textarea"
              maxlength="100"
              :rows="3"
              placeholder="请输入内容"
              v-model="ruleForm.optContent"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <div class="fixed-bottom-20">
          <el-button type="danger" @click="submitForm('ruleForm')"
            >审核</el-button
          >
          <el-button type="success" @click="back">返回</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { auditPageComplaint, doAuditComplaint } from "@/api/orderafter";
import { getCodeManager } from "@/api/all";
import { Message } from "element-ui";
export default {
  name: "complaintdetails",
  data() {
    return {
      sellerComplaintVO: {},
      ruleForm: {
        id: "",
        stateType: "agree",
        optContent: ""
      }
    };
  },
  created() {
    let id = this.$route.query.id;
    auditPageComplaint({ id: id }).then(res => {
      this.sellerComplaintVO = res.data.data.sellerComplaintVO;
    });
    // 是否推荐
    getCodeManager("SELLER_COMPLAINT", () => {});
  },
  methods: {
    back() {
      history.back();
    },
    submitForm() {
      this.ruleForm.id = this.sellerComplaintVO.id;
      doAuditComplaint(this.ruleForm).then(res => {
        if (!res.data.success) {
          Message.error(res.data.message);
          return;
        }
        Message.success("操作成功");
        history.back();
      });
    }
  }
};
</script>
<style scoped>
.divider-line {
  font-size: 20px;
  font-weight: 300;
}
.el-form-item {
  margin-bottom: 5px;
}
.picture-list {
  display: flex;
}
.picture-list li {
  list-style: none;
  margin-right: 10px;
}
</style>
